<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>代码生成数据源维护表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/components/layuiadmin/layui/src/css/layui.css" media="all">
    <link rel="stylesheet" href="/components/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/manage/css/base-search.css" media="all">


    <script src="/manage/js/app.js"></script>
</head>
<body>
<style>
    .layui-inline {
        width: 260px;
    }
</style>

<!-- 搜索 -->
<div class="searchTable">
    <div class="layui-inline">
        <label class="layui-form-label">命名:</label>
        <div class="layui-input-block">
            <input type="text" id="dbTitle" name="dbTitle" placeholder="请输入数据库标题..." autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">库名:</label>
        <div class="layui-input-block">
            <input type="text" id="dbName" name="dbName" placeholder="请输入数据库名..." autocomplete="off" class="layui-input">
        </div>
    </div>


    <!-- <button class="layui-btn layui-btn-normal layui-btn-sm" data-type="reload">搜索</button>-->
    <div class="layui-inline">
        <button class="layui-btn layui-btn-normal layui-btn-sm" data-type="reload" style="margin-bottom: 8px">
            <i class="layui-icon layui-icon-search  layuiadmin-button-btn"></i>
        </button>
    </div>
</div>

<!-- 表格 -->
<table class="auth-table" id="auth-table" lay-filter="auth-table"></table>

<!-- 分页插件 -->
<div class="page-table" id="page-table"></div>

<!-- 多删除-添加  -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>

<!-- 每一行的数据修改或删除  -->
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn  layui-btn-warm layui-btn-xs" lay-event="resetPassword">重置密码</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>

    // 接口
    var datasourceUrl = path + "/admin/datasource";
    let datasourceListUrl = path + "/admin/datasource/list";
    let datasourceIdUpdPwdUrl = path + "/admin/datasource/{id}/updPwd";       // 修改密码
    var datasourceDataSourceTest = path + "/admin/datasource/dataSourceTest";  // 测试连接

    // 路由
    let adminDatasourcePageAdd = "/page/manage_gc_datasource_datasourceAdd";   //添加弹出
    let adminDatasourcePageUpd = "/page/manage_gc_datasource_datasourceUpd";   //编辑弹出

    let table;     // 数据表格组件
    let laypage;   // 分页组件
    let res;       // 完整的后台数据
    var data;      // 当前行数据（弹出层时可直接parent.data获取）
    layui.use(['table', 'laypage'], function () {
        table = layui.table;
        laypage = layui.laypage;
        xijiaRenderTable();        //  数据表格 - 获取表格
        xijiaLayPage();            //  分页插件
        xijiaEventToolbar();       //  工具栏事件（多删除/添加）
        xijiaEventTool();          //  监听数据表格内按钮操作（编辑,删除等）
        xijiaEventSearch();        //  监听条件搜索
    });


    /**
     * 重载表格和加载表格
     * ---- getPage()= 获取 layui 当前分页参数 ===> 如：?current=1&size=10
     * ---- res = 后台返回的整个数据，整个页面可获取使用
     * @param params get请求的参数拼接
     *
     */
    function xijiaRenderTable(params) {
        res = Ajax.get(datasourceListUrl + getPage() + xijiaSearchParam());
        table.render({
            elem: '#auth-table'
            , data: res.data.records
            , toolbar: '#toolbarDemo'
            , limit: res.data.size //显示的数量
            , title: '代码生成数据源维护表'
            , cols: [
                [
                    // {type: 'checkbox', fixed: 'left'}   //fixed: 'right', , fixed: 'left'

                    {field: 'dbTitle', title: '命名'},
                    {field: 'dbName', title: '库名'},
                    {field: 'dbUrl', title: '连接地址'},
                    {field: 'dbUsername', title: '账号'},
                    {field: 'dbPrefix', title: '表前缀'},
                    {field: 'dbFieldPrefix', title: '字段前缀'},
                    {title: '操作', toolbar: '#barDemo', width: 250}
                ]
            ]
        });
    }


    /**
     * 分页配置, 数据总数会在下一次点击事更新上一次数据库的总数量
     * @author ws
     * @mail  1720696548@qq.com
     * @param result 后台返回数据, 用于第一此加载总数据
     * @date  2020/4/22 0022 1:18
     * @return
     */
    function xijiaLayPage() {
        laypage.render({
            // 注意，这里的 page-table 是 ID，不用加 # 号
            elem: 'page-table'
            , count: res.data.total    // 数据总数，从服务端得到
            , limit: res.data.size     // 每页数量
            // 基础信息配置
            , layout: pageJson.layout
            , curr: pageJson.curr
            , limits: pageJson.limits
            , groups: pageJson.groups
            , prev: pageJson.prev
            , next: pageJson.next
            // 监听 obj包含了当前分页的所有参数， 比如： obj.curr =当前页, obj.limit = 每页显示条数
            , jump: function (obj, first) {
                //首次不执行, 第一次加载时 first=true
                if (first) {
                    return;
                }
                // 刷新表格
                xijiaRenderTable();
            }
        });
    }


    /**
     * 工具栏事件（多删除 || 添加）  ==>> toolbar(auth-table): toolbar=监听表格头事件,  auth-table=数据表格elem 名称
     * @author ws
     * @mail  1720696548@qq.com
     * @param null
     * @date  2020/4/10 0010 0:05
     * @return
     */
    function xijiaEventToolbar() {
        table.on('toolbar(auth-table)', function (obj) {
            //添加
            if (obj.event === "add") {
                Pop.tipsWindown(adminDatasourcePageAdd, "80%", "80%", "添加");
            }
        });
    }

    /**
     * 监听数据表格内按钮（编辑 || 删除 || 其他）, tool(auth-table)==> tool =监听按钮， auth-table=数据表格elem对应值
     * @author ws
     * @mail  1720696548@qq.com
     * @param null
     * @date  2020/4/10 0010 0:03
     * @return
     */
    function xijiaEventTool() {
        table.on('tool(auth-table)', function (obj) {
            data = obj.data;  //当前行数据
            //编辑
            if (obj.event === 'edit') {
                Pop.tipsWindown(adminDatasourcePageUpd, "80%", "80%", "修改");
            }
            //删除
            if (obj.event === 'del') {
                Pop.tipsDeleteId(datasourceUrl + "/" + data.id, obj);
            }
            //   重置密码
            if (obj.event === 'resetPassword') {
                //例子2 //输入框类型，支持0（文本）默认1（密码）2（多行文本）
                layer.prompt({
                    formType: 0,
                    value: '123456',
                    title: '重置密码',
                    area: ['300px', '200px'] //自定义文本域宽高
                }, function (value, index, elem) {
                    let result = Ajax.put(datasourceIdUpdPwdUrl.replace("{id}", data.id) + "?password=" + value);
                    layer.msg(result.msg);
                    layer.close(index);
                });
            }
        });
    }

    /**
     * 条件搜索，重载数据
     * @author ws
     * @mail  1720696548@qq.com
     * @date  2020/4/10 0010 0:03
     * @return
     */
    function xijiaEventSearch() {
        let $ = layui.$, active = {
            //搜索
            reload: function () {
                // 重置到第一页
                $(".layui-laypage-skip .layui-input").val(1);
                // 重载-数据表格(带所有查询参数)
                xijiaRenderTable();
                // 重载后-刷新分页数据
                xijiaLayPage();
            }
        };
        $('.searchTable .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    }


    /**
     * 搜索参数
     * @author wangsong
     * @date 2020/8/23 0023 22:53
     * @return
     * @version 1.0.1
     */
    function xijiaSearchParam() {
        let params = "";
        params += "&dbTitle=" + $("#dbTitle").val();
        params += "&dbName=" + $("#dbName").val();

        return params;
    }
</script>
</body>
</html>
